import { InboxOutlined, UploadOutlined, PlusOutlined } from '@ant-design/icons';
import {
  Button,
  AutoComplete,
  Cascader,
  DatePicker,
  Checkbox,
  Col,
  Form,
  InputNumber,
  Input,
  Radio,
  Rate,
  Row,
  Select,
  Slider,
  Switch,
  Upload,
} from 'antd';
import React, { useState } from 'react';
const { RangePicker } = DatePicker;

const { Option } = Select;
const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const normFile = (e) => {
  console.log('Upload event:', e);
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};

//提交功能
const add = () => {

}


  /*开关 */
  // const [componentDisabled, setComponentDisabled] = useState(true);
  // const onFinish = (values) => {
  //   console.log('Received values of form: ', values);
  // };

  //提交处理模块
  const config = {
    rules: [
      {
        type: 'object',
        required: true,
        message: '请选择时间',
      },
    ],
  };
const FormDisabledDemo = () => {

  //提交处理模块
  const onFinish = (fieldsValue) => {
    // Should format date value before submit.
    const rangeValue = fieldsValue['range-picker'];
    const rangeTimeValue = fieldsValue['range-time-picker'];
    // const [componentDisabled, setComponentDisabled] = useState(true);
    const values = {
      ...fieldsValue,
      'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
      // 'setComponentDisabled':fieldsValue['setComponentDisabled']
    };
    console.log('Received values of form: ', values);
  };
  return (
    <Form
      name="validate_other"
      {...formItemLayout}
      onFinish={onFinish}
      initialValues={{
   
      }}
    >
      <Form.Item
        name="radio-group"
        label="发布范围"
        rules={[
          {
            required: true,
            message: '请选择',
            whitespace: 'true'
          },
        ]}
      >
        <Radio.Group>
          <Radio value="全部学校"> 全部学校 </Radio>
          <Radio value="指定学校"> 指定学校 </Radio>
          <Radio value="指定学段"> 指定学段 </Radio>
        </Radio.Group>
      </Form.Item>

      <Form.Item
        name="checkbox-group"
        label="发布对象"
        rules={[
          {
            required: true,
            message: '请选择',
            whitespace: 'true'
          },
        ]}
      >
        <Checkbox.Group >
          <Row >
            <Col span={8}>
              <Checkbox
                value="老师"
                style={{
                  lineHeight: '32px',
                }}
              >
                老师
              </Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox
                value="学生"
                style={{
                  lineHeight: '32px',
                }}
              >
                学生
              </Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox
                value="家长"
                style={{
                  lineHeight: '32px',
                }}
              >
                家长
              </Checkbox>
            </Col>
          </Row>
        </Checkbox.Group>
      </Form.Item>

      <Form.Item
        name="writer"
        label="署名"
        rules={[
          {
            required: true,
            message: '请输入您的署名',
            whitespace: true,
          },
        ]}
      >
        <Input style={{ width: "300px" }} />
      </Form.Item>

      <Form.Item 
      name="date-time-picker" 
      label="定时发布"
       {...config}
      // valuePropName={data.type} 
      // key={data.type}
        
      >
        {/* <Switch checked={componentDisabled}

          onChange={() => {
            setComponentDisabled(!componentDisabled);
          }}
        /> */}
        <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"
          // disabled={!componentDisabled}
          style={{ marginLeft: "20px"}}
        />
      </Form.Item>


      <Form.Item
        name="notice-title"
        label="通知标题"
        rules={[
          {
            required: true,
            message: '请输入通知标题',
            whitespace: true,
          },
        ]}
      >
        <Input style={{ width: "400px" }} />
      </Form.Item>
      <Form.Item
        name="intro"
        label="通知内容"
        rules={[
          {
            required: true,
            message: '请输入通知内容',
          },
        ]}
      >
        <Input.TextArea showCount maxLength={100}
          style={{ width: "400px", height: "300px" }}
        />
      </Form.Item>
      <Form.Item label="封面"
        valuePropName="fileList"
        getValueFromEvent={normFile}
        extra="请不要上传不相关的图片"
      >
        <Upload action="/upload.do" listType="picture-card">
          <div>
            <PlusOutlined />
            <div
              style={{
                marginTop: 8,
              }}
            >
              添加图片
            </div>
          </div>
        </Upload>
      </Form.Item>
      <Form.Item label="附件上传">
        <Form.Item name="附件上传" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
          <Upload.Dragger name="files" action="/upload.do" style={{ width: "500px" }}>
            <p className="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p className="ant-upload-text">最多上传5份附件</p>
            <p className="ant-upload-hint">支持附件格式Word、Excel、PPT、PDF、JPG</p>
            <p className="ant-upload-hint">附件大小需小于50MB</p>
          </Upload.Dragger>
        </Form.Item>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          span: 12,
          offset: 6,
        }}
      >
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};
export default FormDisabledDemo;